<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
pageContext.setAttribute("path",request.getContextPath());
%>

<link rel="stylesheet"  href="${path}/jsp/userspace/css/jiazaitoubu.css">
<link rel="stylesheet"  href="${path}/jsp/userspace/css/css.css">
<script src="${path}/js/jquery-3.3.1.min.js"></script>

<script src="${path}/jsp/userspace/js/index2.js"></script>
<link rel="stylesheet"  href="${path}/jsp/userspace/css/center.css">
<!--城市联动-->
<link rel="stylesheet"  href="${path}/jsp/userspace/city/city.css">
<script src="${path}/jsp/userspace/city/Popt.js"></script>
<script src="${path}/jsp/userspace/city/cityJson.js"></script>
<script src="${path}/jsp/userspace/city/citySet.js"></script>
 
<link href="${path}/jsp/userspace/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${path}/jsp/userspace/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>
<!--top-->
<div class="top" id="wyqtb">
	<div class="top_in">
    	<em>地区选择</em>
        <!--插入插件-->
        <input type="text" id="city" style=" margin-top:8px; font-size:12px; text-align:center; color:#343434; height:24px; float:left" value="请输入地址范围..."/>
        <script type="text/javascript">
			$("#city").click(function (e) {
				SelCity(this,e);
			});
		</script>
        <!--注册/登录-->
        <div class="zcdl">
        	<a href="#">注册</a>
            <i></i>
            <a href="#">登录</a>
        </div>
        <!--客服电话-->
        <div class="kfdh">
        	客服热线：400-9022-567
        </div>
    </div>
</div>
<!--导航加搜索框-->
<div style=" width:100%; height:auto; background:#fff">
<div class="dhjssk">
	<a href="#" class="logo"><img src="${path}/jsp/userspace/images/logo.png"/></a>
    <div class="searchk">
    	
    	<input type="text" style="width:387px;height:40px;background:#fff;float:left; font-size:16px; color:#adadad; text-indent:16px;line-height:40px" value="请输入..." onfocus="if(value=='请输入...') {value=''}" onblur="if (value=='') {value='请输入...'}">
        <div class="ssl"><img src="${path}/jsp/userspace/images/fangdajing.png"/></div>
    </div>
    <!--我们的优势-->
    <div class="wmdys">
    	<ul>
        	<li><b style="background:url(${path}/jsp/userspace/images/wmdys.png) no-repeat 0 0"></b><p>金牌商家</p></li>
            <li><b style="background:url(${path}/jsp/userspace/images/wmdys.png) no-repeat -36px 0"></b><p>提前预定</p></li>
            <li><b style="background:url(${path}/jsp/userspace/images/wmdys.png) no-repeat -72px 0"></b><p>放心安全</p></li>
        </ul>
    </div>
  
</div>
</div>
<!--导航-->
<div class="dao_hang">
	<div class="nav_css">
    	
    	<!--全部商品分类-->
    	<div class="important"><img src="${path}/jsp/userspace/images/all_list.png" style=" margin-top:13px">&nbsp;全部商品分类
        	<div class="aside">
            	<ul>
                	<li class="cates"  mt-ct="list01">
                    	<!--<h3>卫生洁具</h3>-->
                        <p>
                        	<a href="#">川菜</a>
                            <a href="#">粤菜</a>
                            <a href="#">闽菜</a>
                            <a href="#">鲁菜</a>
                            <a href="#">浙菜</a>
                            <a href="#">湘菜</a>
                            <a href="#">徽菜</a>
                            <a href="#">淮扬菜</a>
                        </p>
                    </li>
                    <li class="cates"  mt-ct="list02">
                    	<!--<h3>卫生洁具</h3>-->
                        <p>
                        	<a href="#">川菜</a>
                            <a href="#">粤菜</a>
                            <a href="#">闽菜</a>
                            <a href="#">鲁菜</a>
                            <a href="#">浙菜</a>
                            <a href="#">湘菜</a>
                            <a href="#">徽菜</a>
                            <a href="#">淮扬菜</a>
                            <!--<i style="font-family:'宋体';color:#666; line-height:23px; font-size:14px; float:left">></i>-->
                        </p>
                    </li>
                </ul>
            </div>   
    </div>
</div>
<script>
window.onload=function(){
	$(".aside").css({display:"none"})
	$(".important").mouseenter(function(){
		$(".aside").css({display:"block"})
		}).mouseleave(function(){
			$(".aside").css({display:"none"})
			})
	}
</script>
<!--当前位置-->
<div class="now_positionm">
<span>当前位置：</span><a href="#">首页></a><a href="#">个人中心</a>
</div>
<!--centers-->
<div class="centers_m">
	<!--清除浮动-->
    <div class="clear_sm"></div>
	<!--left-->
    <div class="centers_ml">
    	<!--头像-->
        <div class="center_header">
        	<a href="#"><img src="${path}/jsp/userspace/images/66f625e1ecfd7ad8244efabaa744aa73.png"/></a>
            <em>您好，<font>admin</font></em>
        </div>
        <!--列表go-->
        <div class="centers_listm">
        	<div class="centers_listm_one">
            	<img src="${path}/jsp/userspace/images/zshy.png"/>
                <em>用户中心</em>
            </div>
            <!--一条开始-->
            <div class="centers_listm_one_in">
                <img src="${path}/jsp/userspace/images/shezhi.png"/>
                <em>资料管理</em>
                <b></b>
            </div>
            <span class="gjszmdm">
                <a href="#" class="center_in_self"><font>我的信息</font></a>
            </span>
            <!--一条开始-->
            <div class="centers_listm_one_in">
                <img src="${path}/jsp/userspace/images/ddgl.png"/>
                <em>订单管理</em>
                <b></b>
            </div>
            <span class="gjszmdm">
                <a href="#" class="center_in_self"><font>我的订单</font></a>
                <a href="#" class="center_in_self"><font>评价订单</font></a>
            </span>
            <!--一条开始-->
            <div class="centers_listm_one_in">
                <img src="${path}/jsp/userspace/images/suo.png"/>
                <em>账户安全</em>
                <b></b>
            </div>
            <span class="gjszmdm">
                <a href="#" class="center_in_self"><font>账户安全</font></a>
            </span>    
            <!--一条开始-->
            <div class="centers_listm_one_in">
                <img src="${path}/jsp/userspace/images/wdssc.png"/>
                <em>收藏管理</em>
                <b></b>
            </div>
            <span class="gjszmdm">
            	<a href="#" class="center_in_self"><font>我的收藏</font></a>
            </span>    
        </div>
        <script type="text/javascript">
		$(function(){//第一步都得写这个
			$(".centers_listm_one_in").click(function(){
			$(this).next(".gjszmdm").slideToggle().siblings("gjszmdm").slideUp()
			});
		})
		</script>
    </div>
    <!--right-->
    <div class="centers_mr">
    
    <!--一条开始-->
    	<div class="public_m1">
        	<div class="public_m2">资料管理</div>
            <!--照片和内容-->	
            <div class="zp_nrm">
            	<!-- 
                <div class="zp_nrm_l">
                	<img src="images/66f625e1ecfd7ad8244efabaa744aa73.png"/>
                    <a href="#">更换头像</a>
                </div> -->
                <!--right-->
                <div class="zp_nrm_r">               
                	<p><em>用户名：</em><i>${users.userName}</i></p>
                    <p><em>邮箱：</em><i>${users.userEmail}</i></p>
                    <p><em>手机号：</em><i>${users.userTel}</i></p>
                    <p><em>性别：</em><i>${users.userSex==1?"男":"女"}</i></p>
                    <p><em>身份证：</em><i>${users.userCard}</i></p>
                    <!-- <span class="borth_m">
                     <em>身份证：</em><i>15554465535</i>
                        <select style=" float:left; height:23px; border:1px solid #eaeaea; margin-top:13px; margin-right:3px">
                        	<option>-年-</option>
                            <option>1994年</option>
                        </select>
                    </span> -->
                    <p><em>余额：</em><i>￥${users.userBalance}</i></p>
                    <!-- <a href="#" class="public_m3" id="user_upd_person">保存修改</a> -->
                    <button  class="public_m3"  id="user_upd_person">修改</button>
                </div>              
            </div>
        </div>


</div>




<!-- 修改模态框 -->
<div class="modal fade" id="userUpdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改个人资料</h4>
      </div>
      <div class="modal-body">
        
        <form class="form-horizontal" name="f">
              <input type="hidden" name="userId" class="form-control"  value="${users.userId}">
			  <div class="form-group">
			    <label for="userName_add_name" class="col-sm-2 control-label">用户名</label>
			    <div class="col-sm-6">
			      <input type="text" name="userName" class="form-control" id="userName_add_input" value="${users.userName}">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="email_add_name" class="col-sm-2 control-label">邮箱</label>
			    <div class="col-sm-6">
			      <input type="email" name="userEmail" class="form-control" id="email_add_name" value="${users.userEmail}" >
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="userTel_add_name" class="col-sm-2 control-label">手机号</label>
			    <div class="col-sm-6">
			      <input type="text" name="userTel" class="form-control" id="userTel_add_input" value="${users.userTel}">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="gender_add_name" class="col-sm-2 control-label">性别</label>
			    <div class="col-sm-10">
			        <label class="radio-inline">
					  <input type="radio" name="userSex" id="isNan" value="1" > 男
					</label>	  
					<label class="radio-inline">
					  <input type="radio" name="userSex" id="isNv" value="0"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="usercard_add_name" class="col-sm-2 control-label">身份证号</label>
			    <div class="col-sm-6">
			      <input type="text" name="userCard" class="form-control" id="usercard_add_input" value="${users.userCard}">
			      <span class="help-block"></span>
			    </div>
			  </div>				
		</form>    
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" onclick="save_user()" class="btn btn-primary" id="emp_save_btn">保存</button>
        
      </div>
    </div>
  </div>
</div>
       

</body>
<script type="text/javascript">

	var user_sex = "${users.userSex}";
	if(user_sex == 1){
		document.getElementById("isNan").checked = true;
	}else{
		document.getElementById("isNv").checked = true;
	}

/*//点击修改按钮弹出模态框。  */
$("#user_upd_person").click(function() {
	//发送ajax请求，查出部门信息，显示在下拉列表中
	
    $("#userUpdModal").modal({
    	backdrop:"static"
    });
 });
 
function save_user(){
	 /* $("#userUpdModal form").serialize(), */
	 var userId=f.userId.value;
	 var userName=f.userName.value;
	var userEmail=f.userEmail.value;
	var userTel=f.userTel.value;
	var userSex=f.userSex.value;
	var userCard=f.userCard.value;
	
	//对提交给服务器的数据进行校验
	if(!validate_add_form()){
		 return false;
	 }
	
	$.ajax({//进行提交
	type : "POST",//提交方式
	url : "${pageContext.request.contextPath}/updUsers",//提交路径
	async : false,//是否异步
	dataType : 'json',//数据格式（不进行跨越json，跨域使用jsonp），
	timeout:1000,
	data :{ //参数
		userId : userId,
		userName:userName,
		userEmail:userEmail,
		userTel:userTel,
		userSex:userSex,
		userCard:userCard
	}, 
	success : function(data) {//执行成功后调用的方法
		
		$("#userUpdModal").modal('hide');
		window.location.reload();
	},
	error : function(err) {//执行失败后的失败信息的显示
		console.log(err);
	}
  });	
}
	//校验表单数据
	function validate_add_form() {
		//1.拿到要校验的数据，使用正则表达式
		var userName = $("#userName_add_input").val();
		var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
		if($.trim($('#userName_add_input').val()).length == 0){
			var str = '';
			str += '名称没有输入\n';
	        $('#userName_add_input').focus();
	        return false;
		}
		else if(!regName.test(userName)){
			//alert("用户名可以是2-5位中文或6-16位数字和英文的组合");
			//校验成功应该清空之前失败的样式"has-error"
			show_validate_msg("#userName_add_input","error","用户名必须是2-5位中文或6-16位数字和英文的组合");
			
			return false;
		}else{
			
			show_validate_msg("#userName_add_input","success","");
		};
		// 2.邮箱校验
		 var email = $("#email_add_name").val();
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			
		if(!regEmail.test(email)){
			//alert("邮箱格式不正确");
			show_validate_msg("#email_add_name","error","邮箱格式不正确")
			/* $("#email_add_name").parent().addClass("has-error");
			$("#email_add_name").next("span").text("邮箱格式不正确"); */
			return false;
		}else{
			show_validate_msg("#email_add_name","success","")
			/* $("#email_add_name").parent().addClass("has-success");
			$("#email_add_name").next("span").text(""); */
		}
		
		//3.手机号验证
		var userTel = $("#userTel_add_input").val();
		var regTel = /^1[34578]\d{9}$/;
		if(!regTel.test(userTel)){
			
			//校验成功应该清空之前失败的样式"has-error"
			show_validate_msg("#userTel_add_input","error","手机号码不正确");
			
			return false;
		}else{
			
			show_validate_msg("#userTel_add_input","success","");
		}
		
		//4.身份证号号验证
		var userCart = $("#usercard_add_input").val();
		var regCart = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		if(!regCart.test(userCart)){
			
			//校验成功应该清空之前失败的样式"has-error"
			show_validate_msg("#usercard_add_input","error","身份证号不正确");
			
			return false;
		}else{
			
			show_validate_msg("#usercard_add_input","success","");
		}
		return true;
	}
	   function show_validate_msg(ele,status,msg) {
	   	//清除当前元素校验状态
	   	$(ele).parent().removeClass("has-success has-error");
	   	$(ele).next("span").text("");
			if("success" == status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text("");
			}else if("error" == status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);				
			}
		}


</script>
</html> 